<template>
  <ul class="todo-main" @mouseleave="mouseIndex = -1">
    <li v-for="(todo, index) in todoList" :key="todo.id" :class="{ active: index === mouseIndex }"
      @mouseenter="mouseIndex = index">
      <label>
        <input type="checkbox" :checked="todo.done" @change="emit('singleChecked', index)" />
        <span>{{ todo.thing }}</span>
      </label>
      <button class="btn btn-danger" @click="emit('deleleSingle', index)">删除</button>
    </li>

  </ul>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import type { todoListType } from '../../App'
export default defineComponent({
  name: 'Content'
})
</script>
<script lang="ts" setup>
//接收props方式一：不做类型限制接收props的方式（不推荐）
//defineProps(["todoList"])
//defineProps方法返回一个对象，对象包含所以接收的props值
//但在模板中可以直接使用props的值
const props = defineProps<{
  //限制类型并确定接收的props
  todoList: todoListType
}>()

//接收一个自定义事件
//defineEmits返回一个对象emit对象，供我们使用
const emit = defineEmits<{
  //小括号里面的event固定写法主要为了说明自定义事件的名称，其他都是这个函数的形参，冒号后面就是当前函数的返回值自定义函数事件是没有返回值的所以固定是void
  (event: "singleChecked", index: number): void
  (event: "deleleSingle", index: number): void
}>()




//1.设置一个保存鼠标所在里面的下标
const mouseIndex = ref(-1)
</script>

<style lang="scss" scoped>
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

.active {
  background-color: #ccc;

  button {
    display: block;
  }
}
</style>